<template>
  <div class="LeiLei">
    <ul class="big">
      <li class="big">
        <div class="top">
          <div class="top-l">
            <div class="top-l-l">
              <img src="../../public/img/t1.jpg" alt="" class="user">
            </div>
            <div class="top-l-r">
              <p>Lei-Lei</p>
              <p>2分钟前</p>
            </div>
          </div>
          <div class="top-r">+关注</div>
        </div>

        <h5>[猫宁]做一份喜欢的早餐迎接周末的到来</h5>

        <ul class="small">
          <li class="small">
            <img src="../../public/img/t1.jpg" alt="图片加载异常">
            <p>
              <i class="iconfont icon-yanjing"></i>
              <span>123</span>
            </p>
          </li>          
          <li class="small">
            <img src="../../public/img/t1.jpg" alt="图片加载异常">
            <p>
              <i class="iconfont icon-changyongicon-"></i>
              <span>123</span>
            </p>
          </li>
          <li class="small">
            <img src="../../public/img/t1.jpg" alt="图片加载异常">
            <p>
              <i class="iconfont icon-dianzan"></i>
              <span>123</span>
            </p>
          </li>
        </ul>
      </li>

      <li class="big">
        <div class="top">
          <div class="top-l">
            <div class="top-l-l">
              <img src="../../public/img/t1.jpg" alt="" class="user">
            </div>
            <div class="top-l-r">
              <p>Lei-Lei</p>
              <p>2分钟前</p>
            </div>
          </div>
          <div class="top-r">+关注</div>
        </div>

        <h5>[猫宁]做一份喜欢的早餐迎接周末的到来</h5>

        <ul class="small">
          <li class="small">
            <img src="../../public/img/t1.jpg" alt="图片加载异常">
            <p>
              <i class="iconfont icon-yanjing"></i>
              <span>123</span>
            </p>
          </li>          
          <li class="small">
            <img src="../../public/img/t1.jpg" alt="图片加载异常">
            <p>
              <i class="iconfont icon-changyongicon-"></i>
              <span>123</span>
            </p>
          </li>
          <li class="small">
            <img src="../../public/img/t1.jpg" alt="图片加载异常">
            <p>
              <i class="iconfont icon-dianzan"></i>
              <span>123</span>
            </p>
          </li>
        </ul>
      </li>

      <li class="big">
        <div class="top">
          <div class="top-l">
            <div class="top-l-l">
              <img src="../../public/img/t1.jpg" alt="" class="user">
            </div>
            <div class="top-l-r">
              <p>Lei-Lei</p>
              <p>2分钟前</p>
            </div>
          </div>
          <div class="top-r">+关注</div>
        </div>

        <h5>[猫宁]做一份喜欢的早餐迎接周末的到来</h5>

        <ul class="small">
          <li class="small">
            <img src="../../public/img/t1.jpg" alt="图片加载异常">
            <p>
              <i class="iconfont icon-yanjing"></i>
              <span>123</span>
            </p>
          </li>          
          <li class="small">
            <img src="../../public/img/t1.jpg" alt="图片加载异常">
            <p>
              <i class="iconfont icon-changyongicon-"></i>
              <span>123</span>
            </p>
          </li>
          <li class="small">
            <img src="../../public/img/t1.jpg" alt="图片加载异常">
            <p>
              <i class="iconfont icon-dianzan"></i>
              <span>123</span>
            </p>
          </li>
        </ul>
      </li>

      <li class="big">
        <div class="top">
          <div class="top-l">
            <div class="top-l-l">
              <img src="../../public/img/t1.jpg" alt="" class="user">
            </div>
            <div class="top-l-r">
              <p>Lei-Lei</p>
              <p>2分钟前</p>
            </div>
          </div>
          <div class="top-r">+关注</div>
        </div>

        <h5>[猫宁]做一份喜欢的早餐迎接周末的到来</h5>

        <ul class="small">
          <li class="small">
            <img src="../../public/img/t1.jpg" alt="图片加载异常">
            <p>
              <i class="iconfont icon-yanjing"></i>
              <span>123</span>
            </p>
          </li>          
          <li class="small">
            <img src="../../public/img/t1.jpg" alt="图片加载异常">
            <p>
              <i class="iconfont icon-changyongicon-"></i>
              <span>123</span>
            </p>
          </li>
          <li class="small">
            <img src="../../public/img/t1.jpg" alt="图片加载异常">
            <p>
              <i class="iconfont icon-dianzan"></i>
              <span>123</span>
            </p>
          </li>
        </ul>
      </li>
    </ul>  
  </div>
</template>

<style lang="scss">
@import '@/lib/reset.scss';

.LeiLei {
  ul.big {
    li.big {
      .top {
        @include flexbox();
        .top-l {
          margin-left: .2rem;          
          margin-top: .1rem;          
          width:80%;
          @include flexbox();
          img.user {
            width: .42rem;
            height: .42rem;
            border-radius: 50%;
            margin-right: .1rem;
          }
        }
        .top-r {
          color: #f99
        }
      } 
      h5 {
        height:.28rem;
        font:.12rem/.28rem "";
        text-indent: .2rem;
      }
      img {
        width: 1rem;
        height: 1rem
      }
      ul.small {
        @include flexbox();
        @include justify-content(space-around);
        p {
          text-align: center
        }
      }
    }
  }
}

  



  
</style>